<template>
    <div class="workbench">
        <div class="lg:flex">
            <el-card class="!border-none mb-4 flex-1" shadow="never">
                <div class="flex flex-wrap">
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">激活卡密</div>
                        <div class="text-6xl">
                            <u-count-to :start-val="0" :end-val="workbenchData.count.card_used" :autoplay="true">{{ workbenchData.count.card_used }}</u-count-to>
                        </div>
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">待激活卡密</div>
                        <div class="text-6xl">{{ workbenchData.count.card_unused }}</div>
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">剩余佣金</div>
                        <div class="text-6xl">
                            <u-count-to :start-val="0" :end-val="workbenchData.count.commission" :autoplay="true">{{ workbenchData.count.commission }}</u-count-to>
                        </div>
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">提现待审核</div>
                        <div class="text-6xl">{{ workbenchData.count.withdraw_unapply }}</div>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup name="workbench">
import { apiCardCount } from '@/api/merchantcenter'

// 表单数据
const workbenchData: any = reactive({
    count: {
        card_total: 0,
        card_used: 0,
        card_unused: 0,
        commission: 0,
        withdraw_unapply: 0,
        withdraw_pass: 0,
        withdraw_refuse: 0
    }
})

// 获取工作台主页数据
const getData = () => {
    apiCardCount({}).then((res: any) => {
        workbenchData.count = res
    })
}

onMounted(() => {
    getData()
})
</script>

<style lang="scss" scoped></style>
